<%--
  Created by IntelliJ IDEA.
  User: dos009
  Date: 19/02/13
  Time: 2:17 PM
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Getting Started with Phylojive</title>
</head>
<body>
<div id="content">
    <header id="page-header">
        <div class="inner">
            <div class="nav" role="navigation">
                <ul>
                    <li><a href="http://www.ala.org.au">Home</a> <span class=" icon icon-arrow-right"></span></li>
                    <li><a href="${createLink(uri: '/')}">Phylojive</a> <span class=" icon icon-arrow-right"></span></li>
                    <li class="last">Getting Started</li>
                </ul>
            </div>
            <h1>How to use Phylojive</h1>
        </div><!--inner-->
    </header>
    <div class="inner">
        <div id="section" class="">
            <p>Two forms of the Phylojive web application currently exist. They differ
            primarily in arrangement the graphical user elements such as tabs and
            styling.  Figure 1(left)  shows the first.  A button placed above the
            central view pane can be used to reveal and hide tabs which display
            information as well as a various controls. Figure 2 (right) shows an
            alternate form of the web application in which information tabs and
            controls are always visible. Controls and information tabs are otherwise
            the same.</p>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure1.png')}" alt="figure 1"/>
                <figcaption><b>Figure 1</b>.  Phylojive web with application a resizable central view
                pane for phylogenies with a) with   tabs and controls  hidden  and
                b) tabs and controls exposed via a button.</figcaption>
            </figure>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure2.png')}" alt="figure 2"/>
                <figcaption><b>Figure 2</b>.  The web application with tabs which are always visible and a fixed size view pane.​</figcaption>
            </figure>
            <p>
                The visualization shows:<br>
                i) the phylogeny to a chosen depth<br>
                ii) Pinkish triangles  to indicate unexpanded clades which contain members beyond the selected view depth<br>
                iii) branch lengths in proportion<br>
                iv) character states for taxa at tips and nodes<br>
                v) nodes where selected character sets may be disjoint in daughter taxa
            </p>
            <p>﻿
                ﻿Up to ten characters can be visualized. Their states are indicated by a matrix of coloured icons
                appearing to the left of taxon names.
                Tree branches (and nodes for common ancestors) are coloured according to the predicted
                value for the first (chosen) character. Taxa are blue where the first character is scored.
                Same for collapsed clades where all have a value all the first character. Where
                quantitative characters are chosen and the  taxon names subsequently aligned, the
                characters are presented as a heat map.
            </p>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure3.png')}" alt="figure 3"/>
                <figcaption><b>Figure 3</b>. A portion of the visualization with names aligned. The first column is a
                quantitative trait colored in a blue heat map with several - indicating missing data.
                The second column is a qualitative trait with each character state given a different color.
                The tree branches are colored according to the character state of the first column character.​</figcaption>
            </figure>
            <h2>Controls and Navigation</h2>
            <p>
                Viewers can navigate the screen with the arrow buttons or click and drag with a mouse. The tree
                can be expanded with the +/- and home key.
            </p>
            <p> Mousing-over a node or name shows the names of the
                selected characters and their values. The colored icons next to the scientific names represent
                different values for the three &ldquo;characters&rdquo; selected (these can be changed in the &ldquo;character&rdquo;
                tab), as shown in the legend panel on the right. Tree branches (and nodes for common ancestors)
                are colored according to the predicted value for the first (chosen) character, as calculated
                using reverse parsimony. Mousing-over a node or name shows the names of the selected characters
                and their values. Clicking on a node or name brings up a menu to allow the user to perform a
                number of tasks. Phylojive&rsquo;s screen is in two sections. The left side window holds the
                phylogenetic tree and the right side controls the options. By hovering the mouse over the tree,
                various options become available, by either right or left clicking. These options can be
                changed on the right hand widow.
            </p>
            <p>
                Options appear for the use by either a left or hovering. A left click over a terminal or a node
                brings up the popup box above. After selecting External links a popup window appears and the
                use links out to a popup window that as currently programmed links to the species information
                for the chosen terminal at various webservices including ALA. Australian Plant Image Index,
                Australian Plant Name Index and EOL. The user can toggle through these window with the arrow
                buttons on the lower left window and exit by clicking the x in the lower right. Additional
                webservices can be accessed by changing the code. If the user selects View Map a distribution
                map for that terminal or node is generated in the Map box on the right (see below).
            </p>
            <p>
                If a clade is condensed to a triangle the clade is expanded by selecting Expand/Collapse.
            </p>
            <p>
                Hover or click on nodes will fetch taxon specific information pulled from pre-configured
                webservices. Mousing-over a node or name shows the names of the selected characters and their
                values (see below). Left clicking on a node or name brings up a menu to allow the user to
                perform a number of tasks. By left clicking and selecting External Links the user is taken to a
                webservice with information about the selected taxon. This a user configurable system which now
                point to ALA, APNI, APII and EOL but a clever user can configure the viewer to go anywhere.
            </p>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure4.png')}" alt="figure 4"/>
                <figcaption><b>Figure 4</b>. Move around screen with the arrows, expand or contract tree or
                click and drag to move around screen.​</figcaption>
            </figure>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure5.png')}" alt="figure 5"/>
                <figcaption><b>Figure 5</b>. When hovering over a terminal the character states appear.​​</figcaption>
            </figure>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure6.png')}" alt="figure 6"/>
                <figcaption><b>Figure 6</b>. Options appear when left clicking on a terminal or node.​​​</figcaption>
            </figure>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure7.png')}" alt="figure 7"/>
                <figcaption><b>Figure 7</b>. These options appear when External Links is clicked.​</figcaption>
            </figure>
            <h2>Tabs</h2>
            <p>
                There are seven tabs which allows the user navigate and configure the tree. Users can change
                the view scale, collapse or expand select clades, reroot the tree. In any web browser, viewers
                can change the presentation of the tree. They can swap the order individual paired branches or
                sort the whole tree by branch length (ladderise). They can search the tree for a taxon name –
                corresponding to a subtree or terminal taxon. The options tab controls tree viewing options
                such as expanding/contracting nodes. It is often helpful for viewing character information to
                check the align names box. This displays all symbols in columns for easier comparisons. The
                character tab allows selection of characters, up to ten at a time, to be mapped on the tree.
                Note that the tree branches are colored based on the characters states, and ancestral state
                reconstructions, of the first character selected.
            </p>
            <p>
                The Legend tab provides a legend of the character states for all chosen characters.
                Quantitative character states are divided into 10 section of equal size and blue heat map is
                used to color the 10 character states. Qualitative characters are coded with symbols and colors
                to differentiate character states. Phylojive does allow the input of multiple character states
                however multiple characters states do not reconstruct on the tree. If a terminal has two
                character states a new colored symbol is produced which is called multiple. The individual
                character states are identified on the tree by terminal taxon. The Map tab will show the
                distribution map of a selected terminal or nodes. The default is to color the map by terminal
                name (species), that is each terminal is indicated with a different color. The user has the
                option of selecting one of the characters to display on the map. For example the A node with
                ten terminals can be selected and the default will be a map with ten colors one for each
                species. Alternatively the user can use the colour by toggle box and select habit. Now the map
                will be colored by the character state tree or shrub. The trait values come for the coding of
                the species for that trait. Double clicking on the map will produce a larger map for easier
                viewing. The Search tab allows the use to search for a terminal taxon. The taxon will be
                highlighted if found but the use will have to navigate to the terminal branch. ﻿
            </p>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure8.png')}" alt="figure 8"/>
                <figcaption><b>Figure 8</b>. The right panel has several tabs. These allow the user to
                select characters to map, view legend, search for a terminal name and see a distribution map.​</figcaption>
            </figure>
            <h2>Characters Tab</h2>
            <p>
                Viewers may select up to ten characters for simultaneous display on the tree. These data can
                with be from the users upload function of the Input tab or pulled from pre-configured
                webservices. The Character tab allows selection of the character from a pull down menu that
                combines the user uploaded and the webservices derived data. The data can be a mix of
                qualitative or quantitative data. Character 1 is used to color the branches of the phylogenetic
                tree. When hovering the mouse over a terminal or node the character state is given in a
                floating box. The data at the nodes is from an ancestral state reconstruction (see below). In
                order to give the viewers a quick overall impression of the distribution of character states
                for multiple characters colored symbols are used to display the data along with the actual
                value that is available while hovering over the node or terminal. Quantitative characters are
                shown by a heat map while qualitative characters are mapped with a colored symbol. Putative
                differences in the ancestral states qualitative characters are inferred from (Fitch) parsimony.
                Putative changes in the ancestral states of quantitative characters are inferred from a
                phylogenetically weighted comparison of means and standard deviations. The reconstructed
                ancestral state of the first character is used to determine branch colour. Transitions in any
                of the three selected characters is indicated by a red box.
            </p>
            <figure>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure9.png')}" alt="figure 9"/>
                &nbsp;&nbsp;
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure10.png')}" alt="figure 10"/>
                <figcaption><b>Figure 9 &amp; 10</b>. Users can map morphological characters on the phylogeny, if
                characters are available as a .csv file or from a linked webservice such as Identify Life.
                Left, up to 10 characters can be selected and mapped at one time in the characters tab and
                the character state legend is available in the Legend tab, right.​​</figcaption>
            </figure>
            <h2>Maps</h2>
            <p>
                Distribution maps of the terminal are available another new feature is the ability to view a
                map of occurrence records for a given taxon or ancestral node. These data are available through
                the external links outlined above or can be directly mapped in the Map tab. Currently
                Phylojive is configured to generate the maps by accessing the point data from the Atlas of
                Living Australia. This can be configured by the viewer to generate maps of non-Australian taxa
                by accessing the data from any other webservice. The viewer can left click on a terminal and
                select View Map and the distribution map will appear in the Map tab. Distribution maps for
                multiple taxa (up to 32) can also be accessed at nodes by left clicking on the node and
                selecting View Map. The default value is to colour dots by species thereby simultaneously
                mapping multiple taxa each with a different colour. The user has the option, in the Map tab,
                “Colour By: pull down menu to colour the map by any character. For example the user could
                select a node and map by species and then select the character habit and see the geographic
                distribution of trees versus shrubs for that node. Lastly, these maps can be the basis of a
                spatial analysis by automatically importing the different colour schemes as separate spatial
                layers in the ALA spatial portal. Clicking the link “View in Spatial Portal” opens the ALA
                Spatial Portal in a new window (shown below). Layers can be hidden, combined, filtered by other
                criteria (e.g. collector, institution, etc) and various environmental layers can be overlaid or
                used as the basis of modelling, etc.
            </p>
            <figure style="width: 80%;">
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure11.png')}" alt="figure 11"/>
                <img src="${resource(dir: 'images/gettingStarted', file: 'figure12.png')}" alt="figure 12"/>
                <figcaption><b>Figure 11 &amp; 12</b>. Distribution maps accessed by left clicking over a
                node or terminal and selecting view map of single terminals (left) and up to 32 members of
                a clade (right).  Current source of the map points is the Atlas of Living Australia but this
                is configurable.​​</figcaption>
            </figure>
        </div>
    </div>
</div>
</body>
</html>